<template>
    <view class="box">
        <template v-for="(value,key) in 4">
            <u-cell-group>
                <u-cell title="押金" :isLink="true" arrow-direction="down"></u-cell>
                <u-cell>
                    <view slot="title" class="cbox">
                        <view class="content">
                            <view class="desc">
                                <u-text text="房屋押金" size="14" margin="10rpx 0 30rpx 0"></u-text>
                                <u-text mode="price" text="132.32" bold size="20"></u-text>
                            </view>
                            <u-tag text="逾期1天" plain size="mini" type="warning"></u-tag>
                        </view>
                        <u-cell :isLink="true" arrow-direction="right" :border="false">
                            <view slot="title">
                                <text class="u-cell-text">应收款日：</text>
                                <text class="u-cell-text">2021-10-10</text>
                            </view>
                        </u-cell>
                    </view>
                </u-cell>
            </u-cell-group>
        </template>
    </view>
</template>

<script>
    export default {
        name: "ListB",
        methods: {
            open(e) {
                // console.log('open', e)
            },
            close(e) {
                // console.log('close', e)
            },
            change(e) {
                // console.log('change', e)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .box{
        background-color: #fff;
    }
    .cbox{
        @include flex(column);
    }
    .content{
        @include flex(row);
        justify-content: space-between;
        border-bottom: 1rpx solid #eee;
        padding-bottom: 30rpx;
        padding-left: 30rpx;
    }
    .desc{
        @include flex(column);
    }
</style>